<style>
    #root {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .left[data=scale-compose] {
        width: 350px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        overflow: hidden;
        display: inline-block;
        vertical-align: top;
        background-color: #fff;
        animation: showLeft .3s;
    }

    @keyframes showLeft {
        from {
            transform: translateX(-30px);
            opacity: 0;
        }

        to {}
    }

    .left[data=scale-compose] .title {
        font-size: 14px;
        height: 40px;
        color: #fff;
        background-color: #119BA9;
        text-align: center;
        line-height: 40px;
    }

    .left[data=scale-compose] .search {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        height: 50px;
        margin: 0 auto;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .left[data=scale-compose] .block {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        margin-bottom: 10px;
    }

    .left[data=scale-compose] .block span {
        width: 80px;
        line-height: 32px;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        font-size: 14px;
        color: #333;
    }

    .left[data=scale-compose] .block .element {
        width: calc(100% - 90px);
        max-height: 455px;
        overflow: auto;
        vertical-align: top;
        display: inline-block;
    }

    .left[data=scale-compose] .block .element span {
        width: 100%;
        display: inline-block;
        text-align: left;
        line-height: 20px;
        border-bottom: 1px dashed #ccc;
        font-size: 14px;
        color: #333;
        padding: 10px 0;
    }

    .left[data=scale-compose] .block .element span:last-child {
        border-bottom: none;
    }

    .left[data=scale-compose] .save[data="scale-compose"] {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .right[data=scale-compose] {
        width: calc(100% - 370px);
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        overflow: hidden;
        border-radius: 4px;
        margin-left: 15px;
        animation: showRight .3s;
    }

    @keyframes showRight {
        from {
            transform: translateX(30px);
            opacity: 0;
        }

        to {}
    }

    .right[data=scale-compose] .title {
        width: 100%;
        height: 40px;
        background-color: #119BA9;
        color: #fff;
        text-align: center;
        line-height: 40px;
    }

    .content[data=scale-compose] {
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 20px;
    }

    .content[data=scale-compose] .scale-search {
        width: 100%;
        margin-bottom: 20px;
    }

    .content[data=scale-compose] .scale-search .label {
        width: 80px;
        line-height: 32px;
        display: inline-block;
        vertical-align: top;
        color: #333;
        font-size: 14px;
        font-weight: normal;
        text-align: right;
        margin-right: 10px;
    }
</style>

<body>
    <div id="root">
        <div class="left" data="scale-compose">
            <div class="title">量表套餐组合列表</div>
            <div class="search">
                <el-input class="input" v-model="search" size="small" placeholder="组合编号、组合名称" />
                <el-button type="primary" @click="handleSearch" size="mini" style="margin-left: 10px;"
                    icon="el-icon-plus">搜索</el-button>
            </div>
            <div class="block">
                <span>组合编号</span>
                <div class="element">
                    <el-input size="small" :disabled="type.type == 'preview'" v-model="compose.no"
                        placeholder="请填写量表编号" />
                </div>
            </div>
            <div class="block">
                <span>组合名称</span>
                <div class="element">
                    <el-input size="small" :disabled="type.type == 'preview'" v-model="compose.name"
                        placeholder="请填写组合名称" />
                </div>
            </div>
            <div class="block">
                <span>组合说明</span>
                <div class="element">
                    <el-input size="small" :disabled="type.type == 'preview'" v-model="compose.detail" :rows="5"
                        type="textarea" placeholder="请填写组合说明" />
                </div>
            </div>
            <div class="block">
                <span>量表明细</span>
                <div class="element">
                    <span v-for="(item, index) in compose.data" :key="index">{{ item.title }}</span>
                </div>
            </div>
            <div class="save" data="scale-compose" v-if="type.type !== 'preview'">
                <el-button @click="handleSave" type="primary" size="small" icon="el-icon-download">保存</el-button>
            </div>
        </div>
        <div class="right" data="scale-compose">
            <div class="title">
                量表列表
            </div>
            <div class="content" data="scale-compose">
                <div class="scale-search">
                    <span class="label">量表名称</span>
                    <el-input v-model="searchScale.value" :disabled="type.type == 'preview'"
                        style="width: 200px;margin-right: 10px" placeholder="请填写量表名称" size="small" />
                    <el-button type="primary" @click="handleSearchScale" size="small">查询</el-button>
                </div>
                <el-table :row-key="getRowKey" stripe size="mini" v-loading="table.loading" ref="multipleTable"
                    :height="table.height" @selection-change="handleSelectionChange"
                    :data="searchScale.data.length == 0 ? table.data : searchScale.data" border>
                    <el-table-column :reserve-selection="true" type="selection" width="55">
                    </el-table-column>
                    <el-table-column align="center" prop="No" width="80" label="序号">
                    </el-table-column>
                    <el-table-column align="center" prop="title" label="量表名">
                    </el-table-column>
                    <el-table-column align="center" prop="title" width="200" label="创建时间">
                        <template slot-scope="scope">
                            {{ scope.row.addDate.split('T')[0] }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</body>
<script>
    require(['bbcare'], function ($bb) {

        var FollowURL = $bb.baseUrl('followup')
        var URL = $bb.baseUrl("scaleHost")
        if (location.href.indexOf('192.168.3.141') > -1) {
            URL = '/nirn/'
        }

        var vm = new Vue({
            el: '#root',
            created: function () {
                this.param = sessionStorage.getItem('composeScale') ? JSON.parse(sessionStorage.getItem('composeScale')) : { type: 'create' }
                this.getAllScale()
                var rootHeight = document.getElementById('root').clientHeight
                this.table.height = rootHeight - 140
            },
            data: function () {
                return {
                    type: {},
                    search: '',
                    compose: {
                        data: [],
                        no: '',
                        name: '',
                        detail: ''
                    },
                    table: {
                        data: [],
                        loading: false,
                        height: 0,
                    },
                    searchScale: {
                        value: '',
                        data: []
                    },
                    param: null
                }
            },
            methods: {
                getRowKey (row) {
                    return row.id
                },

                handleSave: function () {
                    if (this.compose.no == '') return this.$message.warning('请填写组合编号')
                    if (this.compose.name == '') return this.$message.warning('请填写组合名称')
                    if (this.compose.data.length == 0) return this.$message.warning('请选择量表后保存')
                    var ids = [], that = this
                    this.compose.data.forEach(function (item) {
                        ids.push(item.id)
                    })

                    var param = {
                        scheduleName: this.compose.name,
                        tag: this.compose.no,
                        tip: this.compose.detail,
                        paperIds: ids.join(','),
                        id: this.compose.id
                    }
                    var link = ''
                    if (param.id) {
                        link = URL + 'web/scale/schedule/update'
                    } else {
                        link = URL + 'web/scale/schedule/save'
                        delete param.id
                    }

                    $bb.ajax({
                        url: link,
                        data: JSON.stringify(param),
                        success: function (res) {
                            if (res.code == 500) location.href = location.href
                            if (res.code !== 0) return that.$message.error('提交失败,请联系管理员')
                            that.$message.success('保存成功！')
                            setTimeout(function () {
                                $bb.openPage('scaleCompose')
                            }, 2000)
                        }
                    })
                },
                /**
                 * 获取量表列表
                 */
                handleSelectionChange: function (checkedList) {
                    console.log('checkedList', checkedList)
                    if (this.type.type === 'preview') return
                    this.compose.data = checkedList

                },

                /**
                 * 获取量表组合
                 */
                handleSearch: function () {

                },
                /**
                 * 查询量表
                 */
                handleSearchScale: function () {
                    // if (this.searchScale.value == '') return this.searchScale.data = []
                    let result = [], that = this
                    this.table.data.forEach(function (item, index) {
                        if (item.title.indexOf(that.searchScale.value) > -1) {
                            result.push(item)
                        }
                    })

                    this.searchScale.data = result

                },
                /**
                 * 获取量表列表
                 */
                getAllScale: function () {
                    this.table.loading = true
                    var that = this
                    $bb.get(
                        URL + 'web/scale/getUsableScaleList', {},
                        function (res) {
                            if (res.code == 500) location.href = location.href
                            res.scaleList.forEach(function (item, index) {
                                item.No = index + 1
                            })



                            let navbars = JSON.parse($bb.getSessionStorage("account")).apps[0].navbars
                            console.log('navbars', navbars)
                            let listArr = navbars.filter(item => {
                                if (item.config && item.config.indexOf('type') > -1) {
                                    try {
                                        const configObj = JSON.parse(item.config)
                                        if (configObj.type && configObj.type === 1) {
                                            return true
                                        }
                                    } catch (error) {
                                        console.error('Invalid JSON format in item.config:', item.config)
                                    }
                                }
                                return false
                            })
                            console.log('listArr', listArr)
                            let list = []
                            let resultData = []
                            let newData = []
                            console.log('result', res.scaleList)
                            if (listArr.length) {
                                list = listArr[0].childrens
                                console.log('list', list)
                                resultData = res.scaleList.filter(itemB => {
                                    let idB = itemB.scaleUuid
                                    return list.some(itemA => JSON.parse(itemA.config).id === idB)
                                })
                                console.log('resultData', resultData)
                            }

                            if (resultData.length) {
                                newData = resultData
                                newData.forEach((item, index) => {
                                    item.No = index + 1
                                })
                            } else {
                                newData = res.scaleList
                            }
                            // that.scale.data = newData


                            // that.table.data = res.scaleList
                            that.table.data = newData
                            that.table.loading = false
                            that.getType()
                        }
                    )
                },
                /**
                 * 获取当前页面的 type
                 */
                getType: function () {
                    var type = sessionStorage.getItem('composeScale') ?
                        JSON.parse(sessionStorage.getItem('composeScale')) : null
                    if (!type) return
                    this.type = type
                    if (type.type === 'create') return
                    var arr = type.data.paperIds.split(',')
                    var data = this.table.data.filter(function (d) {
                        if (arr.indexOf(String(d.id)) > -1) {
                            return d
                        }
                    })
                    this.compose = {
                        data: data,
                        no: type.data.tag,
                        name: type.data.scheduleName,
                        detail: type.data.tip
                    }
                    if (type.type === 'edit') {
                        this.compose.id = type.data.id
                    }
                    this.renderTableSelect()
                },
                renderTableSelect: function () {
                    var that = this
                    this.$nextTick(function () {
                        this.compose.data.forEach(function (item) {
                            that.$refs.multipleTable.toggleRowSelection(item, true)
                        })
                    })
                }
            }
        })
    })
</script>